<template>
	<view class="group_info_container">
		<view class="mt_8 plr_16 ptb_12 bc_fff">
			<GoodsCard :data="dataInfo" type="bargain-info-card" goodsType="3" :toDetail="false"
				@click.native="handleDetail" @finish="dataInfo.bargainirgStatus==0&&getAllData()" />
			<!-- 帮砍成功 -->
			<!-- <view class="mt_24 fb fz_16 fc">
				帮砍成功！
			</view> -->
			<template v-if="!loading">
				<!-- 支付成功 -->
				<template v-if="dataInfo.bargainirgStatus==1">
					<view class="mt_24 fb fz_16 fc">
						恭喜您邀请砍价成功，快去支付吧~
					</view>
					<view class="mt_12 fc fc_primary">
						{{$u.timeFormat(dataInfo.endTime, 'yyyy/mm/dd hh:MM')}}活动结束前支付
					</view>
					<view class="mt_24 plr_8 fx jcb">
						<button class="custom_btn lh_44 default  width_160 mt_12 br_57 fz_14"
							@click="$utils.navigateBack(1,'/pages/goods/pages/bargain')">
							继续选购
						</button>
						<button class="custom_btn bc_lg lh_44 primary width_160 mt_12 br_57 fz_14" @click="handleBuy">
							立即支付
						</button>
					</view>
				</template>
				<template v-else-if="dataInfo.bargainirgStatus==0">
					<!-- 砍价中 -->
					<template v-if="dataInfo.isBargainirg">
						<view class="mt_24 fb fz_16 fc">
							帮砍成功！
						</view>
						<view class="mt_24">
							<button class="custom_btn primary bc_lg lh_44 w100 mt_12 br_26 fz_14"
								style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
								@click="$utils.navigateBack(1,'/pages/goods/pages/bargain')">
								我也要参与
							</button>
						</view>
					</template>
					<template v-else>
						<template
							v-if="$utils.floatSub($utils.floatSub(dataInfo.bargainirgStartPrice||0,dataInfo.bargainirgPrice||0),dataInfo.bargainirgMinPrice||0)==0">
							<view class="mt_24 fb fz_16 fc">
								恭喜您邀请砍价成功，快去支付吧~
							</view>
							<view class="mt_12 fc fc_primary">
								{{$u.timeFormat(dataInfo.endTime, 'yyyy/mm/dd hh:MM')}}活动结束前支付
							</view>
							<view class="mt_24">
								<button class="custom_btn primary bc_lg lh_44 w100 mt_12 br_26 fz_14"
									style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
									@click="handleBuy()">
									立即支付
								</button>
							</view>
						</template>
						<template v-else>
							<view class="mt_24 fb fz_16 fc fc_primary">
								已砍<text class="fc_primary">{{dataInfo.bargainirgPrice||0}}</text>元，还剩<text
									class="fc_primary">{{$utils.floatSub($utils.floatSub(dataInfo.bargainirgStartPrice||0,dataInfo.bargainirgPrice||0),dataInfo.bargainirgMinPrice||0)}}</text>元
							</view>
							<view class="fc mt_12">
								<view class="progress">
									<u-line-progress :percentage="percent" activeColor="transparent"
										inactiveColor="#FFD7C8" :showText="false"></u-line-progress>
								</view>
							</view>
							<view class="mt_12 fc">
								<Divider :text="`已有${dataInfo.bargainirgNumber||0}位好友砍价成功`" color="#999" />
							</view>
							<view class="mt_24" v-if="customerId==userInfo.customerId">
								<button class="custom_btn bc_lg lh_44 primary w100 mt_12 br_26 fz_14"
									@click="handleShare">
									继续邀请砍价
								</button>
								<!-- <view class="fc fc_primary mt_8" @click="handleBuy">
								立即支付
							</view> -->
							</view>
							<view class="mt_24" v-else>
								<button class="custom_btn bc_lg lh_44 primary w100 mt_12 br_26 fz_14"
									@click="handleBargain">
									帮好友砍一次
								</button>
							</view>
						</template>
					</template>
				</template>
				<template v-else>
					<template v-if="dataInfo.orderTime">
						<view class="mt_24 fb fz_16 fc">
							已购买该砍价商品。
						</view>
					</template>
					<template v-else>
						<view class="mt_24 fb fz_16 fc">
							好友砍价活动已结束！
						</view>
						<view class="mt_24">
							<button class="custom_btn primary bc_lg lh_44 w100 mt_12 br_26 fz_14"
								style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
								@click="$utils.navigateBack(1,'/pages/goods/pages/bargain')">
								我也要参与
							</button>
						</view>
					</template>
				</template>
			</template>
		</view>
		<u-gap height="24" bgColor="#F6F6F6"></u-gap>
		<view class="mt_8 plr_28 pt_16 pb_32 bc_fff fx fx_col aic">
			<Divider text="砍价记录" color="#333" />
			<view class="mt_8 asstr">
				<view class="height_56 fx aic jcb" v-for="item,index in recordList" :key="index">
					<view class="fx">
						<CusImage width="64rpx" height="64rpx" radius="32rpx" :src="item.customerHeadUrl" />
						<view class="asstr fx fx_col jcb ml_8">
							<view>{{item.customerName||''}}</view>
							<view class="fz_12 fc_999">
								{{item.bargainirgTime||''}}
							</view>
						</view>
					</view>
					<view class="fz_12 fc_primary">
						已砍<text class="fc_primary">{{item.bargainirgPrice||0}}</text>元
					</view>
				</view>
			</view>
			<view class="mt_76" v-if="!recordList.length&&!loading">
				<Empty title="暂无砍价记录" />
			</view>
		</view>
		<PopupBargin :visible.sync="barginPopShow" :data="bargainInfo" />
		<canvas style="width: 600rpx;height:718rpx;" canvas-id="firstCanvas"></canvas>
		<ShareWindow :goodsType="3" :data="dataInfo" :params="dataParams" page="/pages/goods/pages/bargain_info"
			:visible.sync="sharePopShow" @select="handleShareSelect" />
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import CountDown from '@/components/CountDown'
	import Divider from '@/components/Divider.vue'
	import CusImage from '@/components/Image'
	import Empty from '@/components/Empty'
	import PopupBargin from '../components/PopupBargin.vue'
	import ShareWindow from '@/components/goods/ShareWindow'
	import share from '@/mixins/share.js'
	import api from '@/service/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [share],
		components: {
			GoodsCard,
			CountDown,
			Divider,
			CusImage,
			Empty,
			PopupBargin,
			ShareWindow
		},
		data() {
			return {
				timeData: {},
				barginPopShow: false,
				bargainInfo: {},
				id: '',
				dataInfo: {},
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				customerId: null,
				recordList: [],
				loading: true,
				dataParams: null,
				sharePath: '/pages/goods/pages/bargain_info', // 分享连接
				shareTitle: '您的好友邀请您砍一刀',
				sharePopShow: false,
			}
		},
		computed: {
			...mapState(['userType']),
			percent() {
				Math.floor((this.dataInfo.bargainirgPrice || 0) / this
					.$utils.floatSub(this.dataInfo.bargainirgStartPrice || 0, this.dataInfo.bargainirgMinPrice || 0) *
					100)
			}
		},
		onLoad(options) {
			this.customerId = options.customerId || this.$store.state.userInfo.customerId
			if (options.id || options.scene) {
				if (options.scene) {
					const scene = decodeURIComponent(options.scene)
					let params = scene.split(',').reduce((result, item) => {
						let parts = item.split(':');
						result[parts[0]] = parts[1];
						return result;
					}, {});
					const paramsArr = params.g.split('$');
					console.log(999, params, paramsArr)
					this.id = paramsArr[0] || '';
					this.customerId = paramsArr[1] || this.$store.state.userInfo.customerId
					if (paramsArr[1])
						this.$storage.setItem('shareId', paramsArr[1]);
				} else {
					this.id = options.id
				}
			} else {
				this.$utils.showToast('暂无此商品', 1500, 1)
			}
		},
		onShow() {
			this.getAllData()
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getData(), this.getRecord()]).finally(() => {
					uni.hideLoading()
					this.loading = false
				})
			},
			getData() {
				return new Promise(resolve => {
					api.get('/goods/api/product/userBargainirgDetail', {
						id: this.id,
						...this.$store.state.userInfo.customerId ? {
							...this.$store.state.userInfo.customerId ? {
								customerId: this.$store.state.userInfo.customerId
							} : {},
						} : {},
					}, {
						noHideLoading: true
					}).then(res => {
						this.dataInfo = {
							...res.data,
							productName: res.data.name || '',
							salePrice: res.data.bargainirgMinPrice,
							goodsType: 3
						}
						this.shareImageUrl = res.data.coverImageUrl || res.data.specificationImageUrl
						this.dataParams = {
							id: this.id,
							goodsType: 3,
							...this.$store.state.userInfo.customerId ? {
								customerId: this.$store.state.userInfo.customerId
							} : {},
						}
					}).finally(() => {
						resolve()
					})
				})
			},
			getRecord() {
				return new Promise(resolve => {
					api.get('/goods/api/product/bargainirgRecordList', {
						id: this.id,
					}, {
						noHideLoading: true
					}).then(res => {
						this.recordList = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			onChangeCountdown(e) {
				this.timeData = e
			},
			handleBuy() {
				this.$utils.loading()
				const {
					id: bargainId,
					brandId
				} = this.dataInfo
				api.post('/order/api/order/preOrder', {
					preOrderType: 3,
					productDetails: [{
						buyNum: 1,
						bargainId,
						brandId,
					}]
				}).then(res => {
					if (res.data && res.data.preOrderNo) {
						uni.navigateTo({
							url: '/pages/goods/pages/confirm?order=' + res.data.preOrderNo
						})
					} else {
						this.$utils.showToast('下单失败，请重试')
					}
				})
			},
			handleShare() {
				this.sharePopShow = true
			},
			handleShareSelect(type) {
				switch (type) {
					case 'circle':
						wx.downloadFile({
							url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
							success: (res) => {
								wx.showShareImageMenu({
									path: res.tempFilePath
								})
							}
						})
						break;
					default:
						break;
				}
			},
			handleBargain() {
				this.$utils.loading()
				api.get('/marketing/web/api/backstage/bargainirgGoodsConf/helpBargainirg/' + this.dataInfo.id).then(
					res => {
						this.bargainInfo = res.data
						// this.$utils.showToast('帮砍成功', 1500, 0, '', 'success')
						this.barginPopShow = true;
						this.getAllData()
					})
			},
			handleDetail() {
				uni.navigateTo({
					url: '/pages/goods/pages/detail?goodsType=3&id=' + this.dataInfo.goodsId
				})
			}
		},
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.group_info_container {
		.progress {
			/deep/.u-line-progress__line {
				background: linear-gradient(90deg, #FA4904 0%, #FF9000 100%) !important;
				background-size: 100% 100%;
			}
		}
	}
</style>